<template>
    <mobile-top-menu :data="menuData"></mobile-top-menu>
    <div class="my-info">
        <div class="m-i-content">
            <!-- 头像 -->
            <!-- <div class="m-i-avator">
                <div class="avator"></div>
            </div> -->
            <div class="mi-top f-c-c">
                <div class="mi-t-img" @click="changeCover">
                    <input ref="imgInputRef" type="file" accept="image/*" @change="onChange" hidden/>
                    <img :src="coverUrl" alt="" :style="previews.img">
                    <div v-html="previews.html"></div>
                    <div class="cover-icon" ><svg t="1681574772016" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3417" width="28" height="28"><path d="M846.525959 288.822035 733.689055 288.822035l-48.477085-116.694769c-11.257391-27.103288-37.495986-44.61615-66.845431-44.61615L408.757614 127.511115c-29.348422 0-55.587016 17.512862-66.845431 44.61615l-48.475038 116.694769L180.598194 288.822035c-62.71946 0-113.7456 51.02614-113.7456 113.7456l0 378.463658c0 62.71946 51.02614 113.7456 113.7456 113.7456l665.927765 0c62.71946 0 113.7456-51.02614 113.7456-113.7456L960.27156 402.567635C960.27156 339.847152 909.24542 288.822035 846.525959 288.822035zM918.909523 781.030269c0 39.912012-32.471552 72.383564-72.383564 72.383564L180.598194 853.413833c-39.913035 0-72.383564-32.471552-72.383564-72.383564L108.21463 402.567635c0-39.912012 32.470529-72.383564 72.383564-72.383564l126.641305 0c8.357342 0 15.892969-5.02955 19.098987-12.748349l53.770648-129.443118c4.824889-11.614525 16.070001-19.120476 28.64848-19.120476l209.608925 0c12.57848 0 23.823592 7.504928 28.646434 19.1215l53.772694 129.443118c3.207042 7.716752 10.742668 12.747325 19.10001 12.747325l126.641305 0c39.912012 0 72.383564 32.471552 72.383564 72.383564L918.910547 781.030269z" fill="#272636" p-id="3418"></path><path d="M513.561565 349.83769c-115.843378 0-210.089879 94.245478-210.089879 210.089879s94.245478 210.089879 210.089879 210.089879 210.089879-94.245478 210.089879-210.089879S629.405967 349.83769 513.561565 349.83769zM513.561565 728.655412c-93.036953 0-168.727843-75.691913-168.727843-168.727843s75.69089-168.727843 168.727843-168.727843c93.03593 0 168.727843 75.691913 168.727843 168.727843S606.598518 728.655412 513.561565 728.655412z" fill="#272636" p-id="3419"></path><path d="M456.241069 644.973524c-28.319999-19.131733-45.227064-50.924833-45.227064-85.046978 0-11.42112-9.258874-20.681018-20.681018-20.681018s-20.681018 9.259898-20.681018 20.681018c0 47.879474 23.713075 92.484368 63.433728 119.319549 3.549849 2.397606 7.574512 3.546779 11.559267 3.546779 6.638187 0 13.159718-3.190669 17.154705-9.106402C468.193285 664.222937 465.704604 651.368164 456.241069 644.973524z" fill="#272636" p-id="3420"></path><path d="M263.747963 381.095601l-86.860277 0c-11.422144 0-20.681018 9.258874-20.681018 20.681018s9.258874 20.681018 20.681018 20.681018l86.860277 0c11.422144 0 20.681018-9.258874 20.681018-20.681018S275.170107 381.095601 263.747963 381.095601z" fill="#272636" p-id="3421"></path></svg></div>
                </div>
            </div>
            <!-- 昵称 -->
            <div class="mb-1 item" @click="openChangeNickname">
                <div class="item-left">
                    <div class="l-title">昵称</div>
                    <div class="l-info ellipsis">{{ userInfo.nickname }}</div>
                </div>
                <div class="item-right">
                    <svg t="1675349184899" class="icon va-m" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8462" width="16" height="16"><path d="M492.675886 904.817574L885.696074 511.797385 492.675886 118.777197c-12.258185-12.258185-12.432147-32.892131 0.187265-45.51052 12.707416-12.707416 32.995485-12.703323 45.511543-0.187265l411.660734 411.660734c7.120165 7.120165 10.163477 17.065677 8.990768 26.624381 1.500167 9.755178-1.5104 20.010753-8.990768 27.491121L538.374694 950.515359c-12.258185 12.258185-32.892131 12.432147-45.511543-0.187265-12.707416-12.707416-12.703323-32.995485-0.187265-45.51052z" p-id="8463" fill="#BABABA"></path></svg>
                </div>
            </div>
            <!-- 签名 -->
            <div class="mb-1 item" @click="openChangeSignature">
                <div class="item-left">
                    <div class="l-title">签名</div>
                    <div class="l-info ellipsis">{{ userInfo.signature }}</div>
                </div>
                <div class="item-right">
                    <svg t="1675349184899" class="icon va-m" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8462" width="16" height="16"><path d="M492.675886 904.817574L885.696074 511.797385 492.675886 118.777197c-12.258185-12.258185-12.432147-32.892131 0.187265-45.51052 12.707416-12.707416 32.995485-12.703323 45.511543-0.187265l411.660734 411.660734c7.120165 7.120165 10.163477 17.065677 8.990768 26.624381 1.500167 9.755178-1.5104 20.010753-8.990768 27.491121L538.374694 950.515359c-12.258185 12.258185-32.892131 12.432147-45.511543-0.187265-12.707416-12.707416-12.703323-32.995485-0.187265-45.51052z" p-id="8463" fill="#BABABA"></path></svg>
                </div>
            </div>
            <ul class="bottom-ul">
                <!-- uid -->
                <li class="item">
                    <div class="item-left">
                        <div class="l-title">用户uid</div>
                        <div class="l-info ellipsis">{{ userInfo.uid }}</div>
                    </div>
                    <div class="item-right">
                        <!-- <svg t="1675349184899" class="icon va-m" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8462" width="16" height="16"><path d="M492.675886 904.817574L885.696074 511.797385 492.675886 118.777197c-12.258185-12.258185-12.432147-32.892131 0.187265-45.51052 12.707416-12.707416 32.995485-12.703323 45.511543-0.187265l411.660734 411.660734c7.120165 7.120165 10.163477 17.065677 8.990768 26.624381 1.500167 9.755178-1.5104 20.010753-8.990768 27.491121L538.374694 950.515359c-12.258185 12.258185-32.892131 12.432147-45.511543-0.187265-12.707416-12.707416-12.703323-32.995485-0.187265-45.51052z" p-id="8463" fill="#BABABA"></path></svg> -->
                    </div>
                </li>
                <li class="item" @click="openChooseSex">
                    <div class="item-left">
                        <div class="l-title">性别</div>
                        <div class="l-info ellipsis">{{ userInfo.sex }}</div>
                    </div>
                    <div class="item-right">
                        <svg t="1675349184899" class="icon va-m" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8462" width="16" height="16"><path d="M492.675886 904.817574L885.696074 511.797385 492.675886 118.777197c-12.258185-12.258185-12.432147-32.892131 0.187265-45.51052 12.707416-12.707416 32.995485-12.703323 45.511543-0.187265l411.660734 411.660734c7.120165 7.120165 10.163477 17.065677 8.990768 26.624381 1.500167 9.755178-1.5104 20.010753-8.990768 27.491121L538.374694 950.515359c-12.258185 12.258185-32.892131 12.432147-45.511543-0.187265-12.707416-12.707416-12.703323-32.995485-0.187265-45.51052z" p-id="8463" fill="#BABABA"></path></svg>
                    </div>
                </li>
                <li class="item" @click="openDate">
                    <div class="item-left">
                        <div class="l-title">生日</div>
                        <div class="l-info ellipsis">{{ userInfo.birthday }}</div>
                    </div>
                    <div class="item-right">
                        <svg t="1675349184899" class="icon va-m" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8462" width="16" height="16"><path d="M492.675886 904.817574L885.696074 511.797385 492.675886 118.777197c-12.258185-12.258185-12.432147-32.892131 0.187265-45.51052 12.707416-12.707416 32.995485-12.703323 45.511543-0.187265l411.660734 411.660734c7.120165 7.120165 10.163477 17.065677 8.990768 26.624381 1.500167 9.755178-1.5104 20.010753-8.990768 27.491121L538.374694 950.515359c-12.258185 12.258185-32.892131 12.432147-45.511543-0.187265-12.707416-12.707416-12.703323-32.995485-0.187265-45.51052z" p-id="8463" fill="#BABABA"></path></svg>
                    </div>
                </li>
                <li class="item" @click="openAreaList">
                    <div class="item-left">
                        <div class="l-title">地区</div>
                        <div class="l-info ellipsis">{{ userInfo.area }}</div>
                    </div>
                    <div class="item-right">
                        <svg t="1675349184899" class="icon va-m" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8462" width="16" height="16"><path d="M492.675886 904.817574L885.696074 511.797385 492.675886 118.777197c-12.258185-12.258185-12.432147-32.892131 0.187265-45.51052 12.707416-12.707416 32.995485-12.703323 45.511543-0.187265l411.660734 411.660734c7.120165 7.120165 10.163477 17.065677 8.990768 26.624381 1.500167 9.755178-1.5104 20.010753-8.990768 27.491121L538.374694 950.515359c-12.258185 12.258185-32.892131 12.432147-45.511543-0.187265-12.707416-12.707416-12.703323-32.995485-0.187265-45.51052z" p-id="8463" fill="#BABABA"></path></svg>
                    </div>
                </li>
            </ul>
        </div>
        <el-dialog class="cropper-dialog" v-model="isShowPopup" title="图片裁剪" width="100%" :fullscreen="true"
            :before-close=" () => { isShowPopup = false;}">
            <div style="width: 100%; height: 50vh">
                <vueCropper
                ref="cropperRef"
                :img="options.img"
                :info="true"
                :infoTrue="options.infoTrue"
                :auto-crop="options.autoCrop"
                :fixed-box="options.fixedBox"
                :fixedNumber="options.fixedNumber"
                :fixed="options.fixed"
                :centerBox="options.centerBox"
                :full="options.full"
                :autoCropWidth="options.autoCropWidth"
                :autoCropHeight="options.autoCropHeight"
                @realTime="realTime"></vueCropper>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="isShowPopup = false">取消</el-button>
                    <el-button type="primary" @click="finish"> 确认 </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
    <!-- 地区 -->
    <van-popup v-model:show="isOpenAreaList" round position="bottom">
        <van-area ref="areaListRef" title="选择地区" :area-list="areaList" @confirm="confirmChooseArea" @cancel="closeAreaList"/>
    </van-popup>
    <!-- 生日 -->
    <van-popup v-model:show="isOpenDate" round position="bottom">
        <van-date-picker v-model="currentDate" title="选择生日" :min-date="minDate" :max-date="maxDate" @confirm="confirmChooseDate" @cancel="closeDate"/>
    </van-popup>
    <!-- 性别 -->
    <van-popup v-model:show="isOpenChooseSex" round position="bottom">
        <van-picker ref="chooseSexRef" title="选择性别" :columns="columns" @cancel="closeChooseSex" @confirm="confirmChooseSex" />
    </van-popup>
    <!-- 昵称 -->
    <van-popup v-model:show="isOpenChangeNickname" :style="{ padding: '2rem', 'padding-bottom': '1rem', width: '100%' }">
        <div class="update-nickname">
            <textarea v-model="nicknameText" name="" id="" placeholder="新昵称" maxlength="10"></textarea>
            <span class="empty-tip" v-if="isShowNicknameEmptyTip">请输入新昵称</span>
            <span class="input-tip">最多只能输入10个字符</span>
            <div class="un-btn">
                <button class="btn concel-btn" @click="closeChangeNickname">取消</button>
                <button class="btn confirm-btn" @click="confirmChangeNickname">确认</button>
            </div>
        </div>
    </van-popup>
    <!-- 签名 -->
    <van-popup v-model:show="isOpenChangeSignature" :style="{ padding: '2rem', 'padding-bottom': '1rem', width: '100%' }">
        <div class="update-nickname">
            <textarea v-model="signatureText" name="" id="" placeholder="新昵称" maxlength="30"></textarea>
            <span class="empty-tip" v-if="isShowSignatureEmptyTip">请输入新签名</span>
            <span class="input-tip">最多只能输入30个字符</span>
            <div class="un-btn">
                <button class="btn concel-btn" @click="closeChangeSignature">取消</button>
                <button class="btn confirm-btn" @click="confirmChangeSignature">确认</button>
            </div>
        </div>
    </van-popup>
</template>

<script setup lang="ts">
import { getAssetsFile } from '@/utils/util'
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import myInfoStore from './my-info.store'
import VueCropper from "vue-cropper/src/vue-cropper.vue"
import { areaList } from '@vant/area-data';
import overallStore from '@/store/index'

const overallSe = overallStore()
const router = useRouter()
const myInfoSe = myInfoStore()

const menuData = computed(() => {
    return {
        leftMsg: '返回',
        centerMsg: '个人信息'
    }
})

// 获取用户信息
let coverUrl = ref<string>('')
let userInfo = reactive<any>({
    nickname: '',  // 昵称
    signature: '', // 签名
    sex: '', // 性别
    birthday: '', // 生日
    area: '', // 地区
    uid: '', // uid
})
const getUserInfo = () => {
    myInfoSe.getUserInfo().then((res: any) => {
        userInfo.nickname = res.results.nickname
        userInfo.signature = (res.results.signature && res.results.signature != '') ? res.results.signature : '无'
        userInfo.sex = (res.results.sex && res.results.sex != '') ? res.results.sex : '保密' 
        userInfo.birthday = (res.results.birthday && res.results.birthday != '') ? res.results.birthday : '未知' 
        userInfo.area = (res.results.area && res.results.area != '') ? res.results.area : '未知' 
        userInfo.uid = res.results.uid
        coverUrl.value = (res.results.avator &&  res.results.avator != '') ? res.results.avator : getAssetsFile('default-avator.png')
    })
}
onMounted(() => {
    getUserInfo()
})

// 编辑图片
let isShowPopup = ref<boolean>(false)
let imgInputRef = ref<any>(null)
// 点击头像
const changeCover = () => {
    imgInputRef.value.click()
}
// 选择图片
let fileItem = reactive<any>({})
const options = reactive({
    img: '', // 需要剪裁的图片
    autoCrop: true, // 是否默认生成截图框
    autoCropWidth: 100, // 默认生成截图框的宽度
    autoCropHeight: 100, // 默认生成截图框的长度
    fixedBox: true, // 是否固定截图框的大小 不允许改变
    info: true, // 裁剪框的大小信息
    outputSize: 1, // 裁剪生成图片的质量 [1至0.1]
    outputType: 'png', // 裁剪生成图片的格式
    canScale: true, // 图片是否允许滚轮缩放
    fixed: true, // 是否开启截图框宽高固定比例
    fixedNumber: [1, 1], // 截图框的宽高比例 需要配合centerBox一起使用才能生效 1比1
    full: true, // 是否输出原图比例的截图
    canMoveBox: false, // 截图框能否拖动
    original: false, // 上传图片按照原始比例渲染
    centerBox: true, // 截图框是否被限制在图片里面
    infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
    accept: 'image/jpeg,image/jpg,image/png,image/gif'
})
const onChange = (e: any) => {
    if(!e.target.files[0]) return 
    const file = e.target.files[0];
    fileItem = file
    const URL = window.URL || window.webkitURL
    options.img = URL.createObjectURL(file)
    isShowPopup.value = true
}
// 裁剪之后的数据
const cropperRef: any = ref({})
const previews: any = ref({})
const realTime = (data: any) => {
    previews.value = data
}
// 上传图片（点击保存按钮）
let cropperData = ref<any>() // 用于存储裁剪后的图片
const finish = () => {
    cropperRef.value.getCropBlob((data: any) => {
        cropperData.value = data
        isShowPopup.value = false;
        coverUrl.value = previews.value.url
        // avator
        let formData = new FormData()
        formData.append('file', cropperData.value, new Date().getTime() + '.jpg')
        updateUserInfo(formData)
    })
}

// 提交数据
// const token = computed(() => {
//     return overallSe.getToken
// })
const updateUserInfo = (formData: any = {}) => {
    userInfo.type = 'avator'
    myInfoSe.updateUserInfo(formData, userInfo).then((res: any) => {
        if(res.status == 'success') {
            // console.log('token.value', token.value)
            overallSe.setUserInfo(res.results, window.sessionStorage.getItem('token'))
        }
    })
}

// 选择性别
let isOpenChooseSex = ref<boolean>(false)
let chooseSexRef = ref<any>(null)
const columns = [
    { text: '保密', value: '保密' },
    { text: '男', value: '男' },
    { text: '女', value: '女' },
]
// 打开选项框
const openChooseSex = () => {
    isOpenChooseSex.value = true
}
// 关闭选项框
const closeChooseSex = () => {
    isOpenChooseSex.value = false
}
// const selectedValues = ref(['保密'])
const confirmChooseSex = (value: any) => {
    isOpenChooseSex.value = false
    userInfo.sex = chooseSexRef.value.getSelectedOptions()[0].value
    updateUserInfo()
}

// 选择地区
let isOpenAreaList = ref<boolean>(false)
let areaListRef = ref<any>(null)
const openAreaList = () => {
    isOpenAreaList.value = true
}
const closeAreaList = () => {
    isOpenAreaList.value = false
}
// 确认选择区域
const confirmChooseArea = (value: any) => {
    let area = ''
    areaListRef.value.getSelectedOptions().forEach((item: any) => {
        area += `${item.text}`
    })
    userInfo.area = area
    isOpenAreaList.value = false
    updateUserInfo()
}

// 选择生日
let isOpenDate = ref<boolean>(false)
const currentDate = ref(['2021', '01', '01'])
let minDate = new Date(1899, 0, 1)
let maxDate = new Date()
// 打开日期选项框
const openDate = () => {
    isOpenDate.value = true
}
// 关闭日期选项框
const closeDate = () => {
    isOpenDate.value = false
}
// 确认选择日期
const confirmChooseDate = () => {
    isOpenDate.value = false
    let s = ''
    currentDate.value.forEach((item: any, index: any) => {
        if(index != currentDate.value.length - 1) {
            s += `${item}-`
        } else {
            s += `${item}`
        }
    })
    userInfo.birthday = s
    updateUserInfo()
}

// 修改昵称
let isOpenChangeNickname = ref<boolean>(false)
let isShowNicknameEmptyTip = ref<boolean>(false)
let nicknameText = ref<string>('')
// 打开修改昵称弹窗
const openChangeNickname = () => {
    isOpenChangeNickname.value = true
    nicknameText.value = userInfo.nickname
}
// 关闭修改昵称弹窗
const closeChangeNickname = () => {
    isOpenChangeNickname.value = false
    nicknameText.value = ''
}
// 确认修改昵称
const confirmChangeNickname = () => {
    isOpenChangeNickname.value = false
    userInfo.nickname = nicknameText.value
    updateUserInfo()
} 
watch(() => nicknameText.value, (n: any, o: any) => {
    if(!n || n == '') {
        isShowNicknameEmptyTip.value = true
    } else  {
        isShowNicknameEmptyTip.value = false
    }
})

// 修改签名
let isOpenChangeSignature = ref<boolean>(false)
let isShowSignatureEmptyTip = ref<boolean>(false)
let signatureText = ref<string>('')
// 打开修改昵称弹窗
const openChangeSignature = () => {
    isOpenChangeSignature.value = true
    isShowSignatureEmptyTip.value = false
    signatureText.value = userInfo.signature
}
// 关闭修改昵称弹窗
const closeChangeSignature = () => {
    signatureText.value = ''
    isShowSignatureEmptyTip.value = false
    isOpenChangeSignature.value = false
}
// 确认修改昵称
const confirmChangeSignature = () => {
    isOpenChangeSignature.value = false
    isShowSignatureEmptyTip.value = false
    userInfo.signature = signatureText.value
    updateUserInfo()
} 
watch(() => signatureText.value, (n: any, o: any) => {
    if(!n || n == '') {
        isShowSignatureEmptyTip.value = true
    } else  {
        isShowSignatureEmptyTip.value = false
    }
})
</script>

<style lang="less" scoped>
.my-info {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 2.5rem);
    max-height: calc(100vh - 2.5rem);
    overflow-y: auto;
    background-color: var(--content-background-color);
    .m-i-content {
        width: 100%;
        min-height: calc(100vh - 2.5rem);
        background-color: var(--content-background-color);
        // overflow: hidden;
        .mi-top {
            height: 10rem;
            // border-bottom: 1px solid var(--border-color-gray);
            .mi-t-img {
                width: 6rem;
                height: 6rem;
                // padding: 0.3rem;
                // border: 1px solid var(--border-color-gray1);
                position: relative;
                overflow: hidden;
                img {
                    width: 100%;
                    height: 100%;
                }
                .cover-icon {
                    position: absolute;
                    bottom: 0.5rem;
                    right: 0.5rem;
                    path {
                        fill: var(--font-color-gray);
                    }
                }
            }
        }
        .item {
            padding: 0.5rem 1rem;
            box-sizing: border-box;
            height: 4rem;
            background-color: var(--bg-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-direction: row;
            .item-left {
                width: 90%;
                .l-title {
                    height: 1.5rem;
                    line-height: 1.5rem;
                    color: var(--font-color-gray);
                    font-size: 12px;
                }
                .l-info {
                    height: 1.5rem;
                    line-height: 1.5rem;
                    color: var(--font-color-black);
                    font-size: 15px;
                }
            }
            .item-right {
                width: 10%;
            }
        }
        .bottom-ul {
            background-color: var(--bg-color);
            .item {
                margin: 0 1rem;
                padding-left: 0 !important;
                padding-right: 0 !important;
            }
            li {
                border-bottom: 1px solid var(--border-color-gray);
                &:nth-last-child(1) {
                    border-bottom: none;
                }
            }
        }
    }
    .mb-1 {
        margin-bottom: 1.5rem;
    }
}
.update-nickname {
    textarea {
        background-color: var(--bg-color);
        width: 100%;
        box-sizing: border-box;
    }
    .empty-tip {
        display: block;
        color: var(--font-color-red);
        font-size: 12px;
    }
    .input-tip {
        display: block;
        color: var(--font-color-gray);
        font-size: 12px;
    }
    .un-btn {
        text-align: right;
        margin-top: 1rem;
        .btn {
            width: 3rem;
            font-size: 14px;
        }
        .concel-btn {
            margin-right: 0.5rem;
            border: none;
            color: var(--font-color-gray);
        }
        .confirm-btn {
            font-weight: 600;
            border: none;
            color: var(--font-color-green);
        }
    }
}
:deep(.cropper-dialog) {
    background-color: var(--bg-color);
    .el-dialog__title {
        color: var(--font-color-black);
    }
    .el-dialog__close {
        path {
            fill: var(--icon-color-gray);
        }
    }
}
</style>